import { useState } from 'react'
import ProgressBar from './components/ProgressBar/ProgressBar';

function App() {
  
  const [step, setStep] = useState(5);
  const [total, setTotal] = useState(12);
  const [showInfo, setShowInfo] = useState(true);
  const [color, setColor] = useState('yellow');

  const decline = () => {
    let newStep = step -1 ;
    if (newStep < 0) {
      newStep = 0;
    }
    setStep(newStep)
  }

  const increase = () => {
    let newStep = step + 1 ;
    if (newStep > total) {
      newStep = total;
    }
    setStep(newStep)
  }

  return (
    <div className="App">
      <h2>ProgressBar Demo:</h2>
      <div className="desc">
        {/* 
          理下需求  
          组件设计 
          父子组件的传递 
         */}
        <ul>
          <b>@params</b>
          <li>step?:number = 第几步（需要小于等于total）</li>
          <li>total?:number = 完成共需多少（需要小于等于total）</li>
          <li>showInfo?:bool = 是否需要显示百分比数字提示</li>
          <li>color?:string = 自定义进度条颜色</li>
        </ul>
        <div>
          <p>
            <button onClick={decline}>-</button>
            <button onClick={increase}>+</button>
            <label >step:</label>{step}
          </p>
        </div>
      </div>
      <ProgressBar
        step={step}
        total={total}
        showInfo={showInfo}
        color={color}/>
    </div>
  )
}

export default App
